<template>
    <div class="p-4 flex flex-col items-center">
        <h1 class="text-3xl font-bold text-blue-600">TailwindCSS测试</h1>
        <p class="mt-2 text-red-500 text-right">如果这个文本是蓝色的，说明TailwindCSS工作正常</p>
        <button class="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
            测试按钮
        </button>
    </div>
</template>
<script setup>
import { onHide, onShow } from '@dcloudio/uni-app';
import { onMounted } from 'vue';

onMounted(() => {
    console.log('FirstComponent onMounted');
});

onShow(() => {
    console.log('FirstComponent onShow');
})

onHide(() => {
    console.log('FirstComponent onHide');
})

</script>
